<template>
    <codemirror
        ref="codemirror"
        class="qilin-mt-2"
        v-model="getValue"
        :options="options"
        @blur="onBlur"
    ></codemirror>
</template>
<script>
import dedent from "dedent";
import {codemirror} from "vue-codemirror";

import 'codemirror/lib/codemirror.css' //主要样式类
import 'codemirror/addon/selection/active-line.js' // 当前行背景高亮
// 代码提示
import 'codemirror/addon/hint/show-hint.js' //引入提示的js
import 'codemirror/addon/hint/show-hint.css' //引入提示的基本样式
import 'codemirror/addon/hint/javascript-hint.js' //js代码提示
import 'codemirror/addon/hint/html-hint.js' //html代码提示
import 'codemirror/addon/hint/css-hint.js' //css代码提示
//点击某个单词-匹配-全局高亮
import 'codemirror/addon/scroll/annotatescrollbar.js'
import 'codemirror/addon/search/matchesonscrollbar.js'
import 'codemirror/addon/search/match-highlighter.js'
import 'codemirror/addon/search/searchcursor.js'
import 'codemirror/addon/edit/matchtags.js' //匹配标签：点击选中标签的一半，另一半也会高亮
import 'codemirror/addon/edit/matchbrackets.js' //括号匹配
import 'codemirror/addon/edit/closebrackets.js' //补全括号
import 'codemirror/addon/edit/closetag.js' //自动补全HTML标签
import 'codemirror/addon/comment/comment.js' //补全注释
import 'codemirror/addon/dialog/dialog.js' //实现搜索功能
import 'codemirror/addon/dialog/dialog.css' //实现搜索功能
import 'codemirror/addon/search/searchcursor.js' //实现搜索功能
import 'codemirror/addon/search/search.js' //实现搜索功能
// foldGutter
import 'codemirror/addon/fold/foldgutter.css' //实现代码折叠
import 'codemirror/addon/fold/brace-fold.js' //折叠js
import 'codemirror/addon/fold/comment-fold.js' //折叠注释
import 'codemirror/addon/fold/foldcode.js' //实现代码折叠
import 'codemirror/addon/fold/foldgutter.js' //实现代码折叠
import 'codemirror/addon/fold/markdown-fold.js' //折叠markdown
import 'codemirror/addon/fold/xml-fold.js' //折叠xml

// 编辑的主题文件
import 'codemirror/theme/monokai.css'
//引入语言文件
import 'codemirror/mode/javascript/javascript.js'
import 'codemirror/mode/css/css.js'
import 'codemirror/mode/vue/vue.js'
import 'codemirror/mode/htmlmixed/htmlmixed.js'
// 引入自动刷新
import 'codemirror/addon/display/autorefresh'

export default {
    props:{
        codeValue:{
            type:String,
            default:""
        }
    },
    components:{
        codemirror
    },
    data(){
        return {
            options:{
                theme:"monokai", //主题
                mode:"application/json", //代码格式
                tabSize:4, //tab的空格数
                indentUnit:2, //一个块应缩进多少个空格
                readOnly:true, //取值为"nocursor"表示禁用并且禁止聚焦，取值为布尔值如果是true则表示禁用，但不禁止聚焦
                // autocorrect:true, //自动更正
                // spellcheck:true, //拼写检查
                // lint:true, //检查格式
                autoRefresh: true, //是否自动刷新
                lineNumbers:true, //是否显示行数
                lineWrapping:true, //是否自动换行
                lineSeparator:null, //设置换行分隔符,null的时候为默认的 \n
                // styleActiveLine:true, //line选择是否高亮
                // keyMap:"sublime", //sublime编辑器效果
                // matchBrackets:true, //括号匹配
                // autoCloseBrackets:true, //在键入时将自动关闭括号和引号
                // matchTags:{
                //     bothTags:true //将突出显示光标周围的标签
                // },
                // foldFutter:true, //可将对象折叠，与下面的gutters一起使用
                // gutters:[
                //     "CodeMirror-lint-markers",
                //     "CodeMirror-linenumbers",
                //     "CodeMirror-foldgutter"
                // ],
                // highlightSelectionMatches:{
                //     minChars:2,
                //     style:"matchhighlight",
                //     showToken:true
                // }
            }
        }
    },
    computed:{
        getValue(){
            return dedent(this.codeValue);
        }
    },
    methods:{
        // 失去焦点时
        onBlur(cm,event){
            // console.log(cm.getValue());
            // console.log(cm.getTextArea().value);
        }
    }
}
</script>
<style lang="less" scoped>
//设置codemirror高度自适应
::v-deep .CodeMirror {
    height:100% !important;
}
::v-deep .CodeMirror-scroll {
    height:100% !important;
}
</style>